<!-- -->
<template>
  <div id='ebgrade'>
    <div class="ebtop">
      <div class="left">EBUC交易中心</div>
      <div class="right">
        <router-link :to="{name:'tradelist',query: {status: '1'}}" tag="span"><button class="rightbox1">我要挂卖</button></router-link> 
        <router-link :to="{name:'tradelist',query: {status: '0'}}" tag="span"><button class="rightbox2">我要挂买</button></router-link> 
      </div>
    </div>

    <div class="gradesell mysell">
      <div class="sellnav">
        <!-- <div style="height:117px"></div> -->
        <div class="sellnavbox1">
          <div class="sell" :class="{ active: isactive1 === '2' }" @click="getsell1">我的挂卖</div>
          <div class="buy" :class="{ active: isactive1 === '3' }" @click="getbuy1">我的挂买</div>
          <!-- <div class="buy" :class="{ active: isactive1 === '4' }" @click="gradedetail">我的交易</div> -->
        </div>
      </div>
      <table border="1" width = 100% cellspacing = 0 rules = none frame=void id="aaa" v-if="isactive1 !== '4'">
          <tr class="nav navth">
            <th width="20%">时间</th>
            <th width="20%">数量</th>
            <th width="20%">单价</th>
            <!-- <th width="20%">剩余挂单</th> -->
            <th width="20%">操作</th>
          </tr>
      </table>
      <div class="isfixed1" v-if="isactive1 !== '4'">
          <table width="100%">
            <tr v-for="(item,index) in mymessage" :key="index" class="nav meslist">
              <td width="20%">{{item.add_time}}</td>
              <td width="20%">{{item.num}}</td>
              <td width="20%" style="color:rgba(224,3,0,1)">&yen;{{item.money}}</td>
              <!-- <td width="20%">{{item.other}}</td> -->
              <td width="20%"  v-if="isactive1 === '3'"><button class="btn btnclose" :disabled="true">{{statusnum[item.status]}}</button></td>          
              <td width="20%"  v-if="isactive1 === '2'"><button class="btn btnclose" :disabled="true">成功</button></td>          
            </tr>
          </table>
          <div class="mesnull">暂无更多数据...</div>
      </div>
   </div>
  </div>
</template>

<script>
export default {
  name: 'ebgrade',
  data () {
    return {
      uid: this.$store.state.usermes.uid,
      isactive: '0',
      isactive1: '2',
      isstatus: '',
      statusnum: ['已卖完','排队中','已配币'],
      message: [],
      mymessage: [],
      grademessage: [ ],
      // 弹窗
        detailmes: {},
    };
  },
  computed: {
    
  },
  mounted () {
    this.getsell1();
  },
  methods: {
    // 我的挂卖
    getsell1 () {
      this.axios.post('Index/ebuc_my_sell')
        .then(({data})=> {
          console.log(data);
          this.mymessage = data.my_sell_order;
          this.isactive1 = '2';
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 我的挂买
    getbuy1 () {
      this.axios.post('Index/ebuc_pay_list')
      .then(({data})=> {
        console.log(data);
        this.mymessage = data.my_pay_order;
        this.isactive1 = '3';
      })
      .catch(function (error) {
        console.log(error);
      });
    },
  }
}
</script>

<style lang='scss' scoped>
#ebgrade {
  // height: 100%;
  min-width: 1000px;
  // min-height: 600px;
  .ebtop {
    width: 100%;
    height: 55px;
    padding: 0 83px 0 25px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(153,153,153,1);
    .left {
      font-size:13px;
      font-family:MicrosoftYaHei-Bold;
      color:rgba(0,0,0,1);
      font-weight: 700;
      line-height:65px;
    }
    .right {
      line-height: 55px;
      .rightbox1 {
        cursor: pointer;
        width:74px;
        height:24px;
        margin-right: 25px;
        border-radius:2px;
        background-color: #fff;
        border:1px solid rgba(224,3,0,1);
        color: rgba(224,3,0,1);
      }
      .rightbox2 {
        cursor: pointer;
        width:74px;
        height:24px;
        border-radius:2px;
        background-color: #fff;
        border:1px solid rgba(29,98,255,1);
        color: rgba(29,98,255,1);
      }
    }
  }
  .gradesell {
    // height: 47.857vh;
    // min-height: 200px;
    margin: 10px 20px;
    border:1px solid rgba(153,153,153,1);
    overflow: hidden;
    .isfixed {
      height: 30vh;
      // background: red;
      overflow: auto;
    }
    .isfixed1 {
      height: 73vh;
      width: 100%;
      // background: red;
      overflow: auto;
    }
    .sellnav {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: space-between;
      line-height: 50px;
      background-color: #232323;
    .sellnavbox1 {
      font-size:17px;
      font-family:MicrosoftYaHei-Bold;
      color:rgba(0,0,0,1);
      text-align: center;
      display: flex;
      justify-content: flex-start;
      border-top:1px solid rgba(153,153,153,1);
    .sell {
      cursor: pointer;
      width: 163px;
      color: rgba(255,255,255,1);
      border-right:1px solid rgba(151,151,151,1);
    }
    .buy {
      cursor: pointer;
      width: 163px;
      color: rgba(255,255,255,1);
      border-right:1px solid rgba(151,151,151,1);
    }
    .active {
      background-color: rgba(255,255,255,1);
      color: #000;
    }
   }
   .sellnavbox2 {
     margin-right: 17px;
   }
   }
  //     .isfixed {
  // // min-width: 1000px;
  // // padding: 0 20px;
  // position: fixed;
  // top: 100px;
  // right: 20px;
  // left: 270px;
  // background-color: #fff;
  //   border-bottom:1px solid rgba(221,221,221,1);
  //     }
   .nav {
    font-size:13px;
    font-family:MicrosoftYaHei;
    color:#666;
    line-height:45px;
    text-align: center;
    border-bottom:1px solid rgba(221,221,221,1);
    .btn {
      // cursor: pointer;
      padding: 0 15px;
      height:28px;
      background:rgba(29,98,255,1);
      border-radius:3px;
      font-size:11px;
      font-family:MicrosoftYaHei;
      color:rgba(255,255,255,1);
    }
    .btn1 {
      padding: 0 15px;
      height:28px;
      background:none;
      border-radius:3px;
      font-size:11px;
      font-family:MicrosoftYaHei;
      color:rgba(102,102,102,1);
    }
    .btnactive {
     background:rgba(224,3,0,1);
    }
    .btnclose {
      cursor: pointer;
      background:#E1E1E1;
      color:rgba(102,102,102,1);
    }
    .btnother1 {
      cursor: default;
      background: none;
      padding: 0 5px;
      color:rgba(102,102,102,1);
      &:hover {
      cursor: pointer;
      color:rgba(224,3,0,1);
      padding: 0 5px;
      }
    }
    .btnother2 {
      cursor: pointer;
      background: rgba(224,3,0,1);
      color:rgba(255,255,255,1);
    }
    span {
      cursor: pointer;
      color:rgba(102,102,102,1);
      &:hover {
      color:rgba(224,3,0,1);
      }
    }
   }
   .meslist:hover {
     background-color: #f0f0f0;
    }
   .mesnull {
      font-size:14px;
      font-family:MicrosoftYaHei;
      color:rgba(102,102,102,1);
      line-height:50px;
      text-align: center;
      border-top:1px solid rgba(221,221,221,1);
    }
   .navth {
     line-height:55px;
   }
  }
  .mysell {
    // height: 38vh;
    margin-top: 20px;
    overflow: hidden;
  }
  .alertmes {
     margin-left: 30px;
     margin-top: -30px;
     min-width: 550px;
     li {
      line-height: 40px;
      font-size:12px;
      font-family:MicrosoftYaHei;
      color:rgba(102,102,102,1);
      span {
          font-weight: 700;
      }
     }
     li:nth-of-type(4) {
      span {
      color:rgba(224,3,0,1); 
      }
     } 
 }
}
</style>